<template>
	<div class="my-search-bar">
		<van-search shape="round" background="transparent" v-model="inputKey" :placeholder="getPlaceholder" :label="labelText"
					:maxlength="30" ref="refSearch" :clearable="isInputPage" @clickInput="handleClickInput" show-action>
			<template #left><van-icon name="arrow-left" class="btn-back" @click="goBack"/></template>
			<template #left-icon>
				<van-popover v-model:show="showPopover" :actions="searchType" @select="onSelectType" v-if="!shopId && isInputPage"  class="popover-short-width">
					<template #reference>
						<div class="dropdown-type">{{searchTypeText}}</div>
					</template>
				</van-popover>
				<van-icon name="search" v-else/>
			</template>
			<template #right-icon>
				<van-button round type="primary" class="btn-search" @click="SearchResult" v-if="isInputPage">搜索</van-button>
			</template>
			<template #action>
				<van-icon name="weapp-nav" v-if="!isInputPage" class="btn-more"/>
			</template>
		</van-search>
	</div>
</template>
<style lang="scss" scoped>
.my-search-bar{
	--van-primary-color:v-bind(themeColor);
	--van-button-primary-background:v-bind(themeColor);
	--van-button-primary-border-color:v-bind(themeColor);
	position:fixed;z-index:3;top:0;left:0;bottom:0;
	height:54px;width:100%;
	background-color:var(--body-bg-color);
	:deep(.van-search__content){
		background-color:var(--white-color);
	//border:1px solid var(-van--primary-color);
		box-sizing: border-box;
	}
	:deep(.van-search){padding-left:0;}
	:deep(.van-field__right-icon){
		display:flex; align-items:center;padding:0 3px 0 10px;
	}
	:deep(.van-search__label){
		padding:0 3px 0 0; color:var(--font-disable-color);
	}
	.btn-back{
		font-size:18px;height:34px;line-height:34px;padding:0 10px;
	}
	.dropdown-type{
		position: relative; display:flex; align-items:center; height:18px;padding-right:16px;
		border-right:1px solid var(--border-lighter-color); color:var(--font-second-color);margin-right:4px;
		&::after {
			position: absolute;
			top: 50%;
			right:6px;
			margin-top: -5px;
			border: 3px solid;
			border-color: transparent transparent var(--van-gray-4) var(--van-gray-4);
			transform: rotate(-45deg);
			opacity: .8;
			content: "";
		}
	}
	.btn-search.van-button{
		height:28px;
		--van-primary-color:v-bind(themeColor);
	}
	.btn-more{
		height:32px;padding:0 5px;font-size:18px;line-height:32px;
	}
}
</style>
<script lang="ts" setup>
import _ from 'lodash'
//搜索栏组件，搜索输入页、结果页均可通用
//props
const props=defineProps({
	themeColor:{
		type:String,
		default:import.meta.env.VITE_THEME_COLOR,
		required:false,
	},
	shopId:{
		type:String,
		required:false,
	},
	defaultKey:{
		type:String,
		required:false,
		default:'',
	}
})

//data
const inputKey=ref('')  //用户输入的搜索关键字，如果为空，则取默认的关键字，即入参defaultKey
const router=useRouter()
const currentRoute=useRoute()
const refSearch=ref()
const isInputPage=ref(true) //是否在搜索关键字输入的页面？
const searchPage = !props.shopId? inject('searchPage') as any : undefined

//搜索类型选择框
const searchType = [{text:'找商品',page:'/search/goods'},{text:'找店铺',page:'/search/shop'}]
let path = currentRoute.path
const searchTypeText = ref(currentRoute.path === '/search/shop'? '找店铺':'找商品')
const showPopover=ref(false)
const onSelectType=(action:any)=>{
	searchTypeText.value=action.text
	if(searchPage){searchPage.value = action.page}
}

//computed
const getPlaceholder =computed(()=>{
	if(props.defaultKey)	return props.defaultKey
	return _.isEmpty(props.shopId)? '输入商品/店铺关键字':'搜索本店商品'
})
const labelText=computed(()=>{
	if(isInputPage.value){
		return ''
	}else{
		return searchTypeText.value
	}
})

//watch
watch(
	() => currentRoute.path,
	(newVal) => {
		isInputPage.value = (newVal.indexOf('/search/inputKey')>=0)
		if(!_.isEmpty(currentRoute.query.key)){
			inputKey.value = currentRoute.query.key as string
		}
		//console.log('search page is:',newVal)
	},{immediate:true}
);

//methods
const {to,replace,goBack} = useGoto()

const handleClickInput=(e:any)=>{
	if(!isInputPage.value){
		if('/search/inputKey'!==router.options.history.state.back){
			router.replace('/search/inputKey')
		}else{
			goBack()
		}
	}
}
//查询：带着关键字和搜索类型（商品还是店铺）前往结果页
const SearchResult=()=>{
	if(inputKey.value==='' && _.isEmpty(props.defaultKey))	return
	let key = inputKey.value!==''? inputKey.value:props.defaultKey
	inputKey.value = key
	if(_.isEmpty(props.shopId)){
		if(searchTypeText.value==='找商品'){
			to('/search/goods', { key: key, } )
		}else if(searchTypeText.value==='找店铺'){
			to('/search/shop', { key: key, } )
		}
	}else{
		replace('/shop/search', { shopId:props.shopId, key: key, } )
	}
}


onMounted(()=>{
	if(isInputPage.value)	refSearch.value.$el.querySelector('.van-field__control').focus()
})
</script>